<template>
  <div class="cooperation">
    <div class="cooperation-content">
        <img class="home-title" id="cooperate" src="https://static.inclusionconf.com/static/images/cooperation-title-new-2025.png" alt="">

        <div class="list">
            <div class="item" v-for="(item, index) in list" :key="index">
                <img :src="`https://static.inclusionconf.com/static/images/cooperation-new-icon${item.src}-t1.png`" alt="">
                <div class="title">{{ item['title' + En] }}</div>
                <div class="text">{{ item['text' + En] }}</div>
            </div>
        </div>

        <div class="btn hover-btn" @click="link">{{ $t('joinHome') }} <i><img src="https://static.inclusionconf.com/static/images/jiantou-new.png" alt=""></i></div>
    </div>
  </div>
</template>

<script>
import protal from "@/api/protal"

export default {
    data() {
        return {
            list: []
        }
    },
    created() {
        protal.getJson('cooperation', data => {
            this.list = data
        })
    },
    methods: {
        link() {
            this.$router.push({
                name: 'join'
            })
            this.$emit('clickFn')
        }
    }
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 768px) {
    .cooperation {
        position: relative;
        z-index: 1;

        .cooperation-content {
            max-width: 1360px;
            padding: 0 40px 100px;
            margin: 0 auto;

            .list {
                display: flex;
                padding: 10px;
                margin-top: 60px;

                .item {
                    flex: 0 0 calc(25% - 60px);
                    margin-right: 74px;

                    img {
                        width: 140px;
                        height: 140px;
                        margin: 0 auto 30px;
                    }

                    .title {
                        font-family: AlibabaPuHuiTi_3_85_Bold;
                        font-size: 24px;
                        color: #000032;
                        line-height: 24px;
                        text-align: center;
                        font-style: normal;
                        margin-bottom: 8px;
                    }

                    .text {
                        font-family: AlibabaPuHuiTi_3_45_Light;
                        font-size: 16px;
                        color: #000032;
                        line-height: 26px;
                        text-align: center;
                        font-style: normal;
                    }

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }

            .btn {
                width: 223px;
                height: 60px;
                margin: 88px auto 0;
                background: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: AlibabaPuHuiTi_3_65_Medium;
                font-size: 28px;
                color: #7350F5;
                line-height: 28px;
                text-align: left;
                font-style: normal;
                cursor: pointer;
                transition: .3s;

                i {
                    margin-left: 11px;
                    font-size: 28px;

                    img {
                        width: 28px;
                        height: auto;
                    }
                }

                &.en {
                    width: 620px;
                    font-size: 20px;
                }
            }
        }
    }
}
@media screen and (max-width: 1470px) and (min-width: 768px) {
    .cooperation {
        position: relative;
        z-index: 1;

        .cooperation-content {
            max-width: 1360px;
            padding: 0 40px 100px;
            margin: 0 auto;

            .list {
                display: flex;
                padding: 10px;
                margin-top: 60px;

                .item {
                    flex: 0 0 calc(25% - 30px);
                    margin-right: 30px;

                    img {
                        width: 140px;
                        height: 140px;
                        margin: 0 auto 30px;
                    }

                    .title {
                        font-family: AlibabaPuHuiTi_3_85_Bold;
                        font-size: 16px;
                        color: #FFFFFF;
                        line-height: 16px;
                        text-align: center;
                        font-style: normal;
                        margin-bottom: 10px;
                    }

                    .text {
                        font-family: AlibabaPuHuiTi_3_45_Light;
                        font-size: 12px;
                        color: #FFFFFF;
                        line-height: 18px;
                        text-align: center;
                        font-style: normal;
                    }

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }

            .btn {
                width: 223px;
                height: 60px;
                margin: 88px auto 0;
                background: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: AlibabaPuHuiTi_3_65_Medium;
                font-size: 28px;
                color: #7350F5;
                line-height: 28px;
                text-align: left;
                font-style: normal;
                cursor: pointer;

                i {
                    margin-left: 11px;
                    font-size: 28px;
                }
            }
        }
    }
}
@media screen and (max-width: 767px) {
    .cooperation {
        position: relative;
        z-index: 1;
        
        .cooperation-content {
            width: 100%;
            padding: 0 18px 50px;
            margin: 0 auto;

            .list {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-top: 36px;

                .item {
                    flex: 0 0 320rpx;
                    margin-bottom: 31px;

                    img {
                        width: 160rpx;
                        height: 160rpx;
                        margin: 0 auto 10px;
                    }

                    .title {
                        font-family: AlibabaPuHuiTi_3_85_Bold;
                        font-size: 16px;
                        color: #fff;
                        line-height: 16px;
                        text-align: center;
                        font-style: normal;
                        margin-bottom: 8px;
                    }

                    .text {
                        font-family: AlibabaPuHuiTi_3_45_Light;
                        font-size: 10px;
                        color: #fff;
                        line-height: 1.5;
                        text-align: center;
                        font-style: normal;
                    }
                }
            }

            .btn {
                width: 147px;
                height: 40px;
                margin: 13px auto 0;
                background: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: AlibabaPuHuiTi_3_65_Medium;
                font-size: 14px;
                color: #7350F5;
                line-height: 14px;
                text-align: left;
                font-style: normal;
                cursor: pointer;

                i {
                    margin-left: 6px;
                    font-size: 14px;

                    img {
                        width: 14px;
                        height: auto;
                    }
                }

                &.en {
                    width: 240px;
                    padding: 0 30px;
                    height: 60px;
                    line-height: 16px;
                    font-weight: normal;
                }
            }
        }
    }
}
</style>
